<template>
  <div class="pd-20 mac-address">
    <el-input class="w-200"
              placeholder="请输入账号"
              clearable
              @clear="handleQuery"
              v-model="searchCondition"></el-input>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleRow(row)">解 绑</el-button>
      </template>
      <template v-slot:client="{row}">
        <el-tag v-if="row.client==='deviceManagerPc'">pc端</el-tag>
        <el-tag v-if="row.client==='deviceManagerPad'">pad端</el-tag>
      </template>
    </element-table>
  </div>

</template>
<script>
  import elementTable from '@/base/ElementTable.vue'
  export default {
    name: 'macAddress', // mac地址管理
    data () {
      return {
        loading: false,
        searchCondition: '',
        pageIndex: 1,
        pageSize: 20,
        pageTotal: 0,
        tableData: [],
        columns: [
          {
            label: '账号',
            prop: 'loginName',
            align: 'center'
          }, {
            label: '所属公司',
            prop: 'companyName',
            align: 'center'
          }, {
            label: '所属分店',
            prop: 'hospitalName',
            align: 'center'
          }, {
            label: '登录设备类型',
            prop: 'client',
            align: 'center',
            isSlot: true
          }, {
            label: 'mac地址',
            prop: 'mac',
            align: 'center'
          }, {
            width: 100,
            label: '操作',
            prop: 'option',
            align: 'center',
            isSlot: true
          }
        ]
      }
    },
    methods: {
      handleQuery() {
        this.pageIndex = 1
        this.getList()
      },
      async getList () {
        this.loading = true
        const { data: res } = await this.post(this.api.mac.macList, {
          searchCondition: this.searchCondition,
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize
        })
        if (res.code === '200') {
          this.loading = false
          this.tableData = res.object || []
          this.pageTotal = res.totalNum || 0
        }
      },
      handleRow (row) {
        console.log(row)
        this.$confirm('确认解绑？')
          .then(async _ => {
            const { data: res } = await this.post(this.api.mac.unbind, {
              id: row.id
            })
            if (res.code === '200') {
              this.$message.success('解绑成功')
              this.getList()
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(_ => { });
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page
        this.getList()
      },
    },
    created () {
      this.getList()
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
<style scoped lang="scss">
</style>
